<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 餐段 -->
      <uni-card title="餐段" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.chanDuan"
            :localdata="chanDuan"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 食品名称 -->
      <uni-card title="食品名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.foodName" />
        </uni-forms-item>
      </uni-card>
      <!-- 开始时间 -->
      <uni-card title="开始时间" extra="必填*">
        <uni-forms-item>
          <view
            @click="datesPop = true"
            class="border-solid border-gray-300 flex items-center justify-between rounded h-10 border"
          >
            <text class="float-left ml-3">{{ formData.selectedTime }}</text>
            <uni-icons
              class="float-right font-bold"
              type="arrow-down"
              size="18"
            ></uni-icons>
          </view>
        </uni-forms-item>
      </uni-card>
      <!-- 开始温度/初始温度 -->
      <uni-card title="开始温度/初始温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.startTemperature" />
        </uni-forms-item>
      </uni-card>
      <!-- 一小时后食品温度 -->
      <uni-card title="1小时后食品温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.afterOneHourTemperature" />
        </uni-forms-item>
      </uni-card>
      <!-- 2小时后食品温度 -->
      <uni-card title="2小时后食品温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.afterTwoHourTemperature" />
        </uni-forms-item>
      </uni-card>
      <!-- 2小时纠正措施 -->
      <uni-card title="纠正措施" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.towJiuZhenChuoShi"
            :localdata="jiuZhenChuoShi"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 4小时后食品温度 -->
      <uni-card title="4小时后食品温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.afterFourHourTemperature" />
        </uni-forms-item>
      </uni-card>
      <!-- 6小时后食品温度 -->
      <uni-card title="6小时后食品温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.afterSixHourTemperature" />
        </uni-forms-item>
      </uni-card>
      <!-- 纠正措施 -->
      <uni-card title="纠正措施" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.jiuZhenChuoShi"
            :localdata="jiuZhenChuoShi"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 填报人姓名 -->
      <uni-card title="填报人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.tianBaoRenXinMing" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="shiWuLengQue"
    />
  </scroll-view>
  <!-- 开始事件组件 -->
  <Dates
    v-model:selectedTime="formData.selectedTime"
    @timeSelected="handleTimeSelected"
    @popType="datesPop = $event"
    v-if="datesPop"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Dates from '@/components/Dates/Dates.vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  chanDuan: '', // 餐段chanDuan
  foodName: '', // 食物名称foodName
  selectedTime: '', //开始时间selectedTime
  startTemperature: '', // 开始温度startTemperature
  afterOneHourTemperature: '', // 1小时后温度afterOneHourTemperature
  afterTwoHourTemperature: '', // 2小时后温度afterTwoHourTemperature
  towJiuZhenChuoShi: '', // 2小时纠正措施
  afterFourHourTemperature: '', // 4小时后温度afterFourHourTemperature
  afterSixHourTemperature: '', // 6小时后温度afterSixHourTemperature
  jiuZhenChuoShi: '', // 纠正措施jiuZhenChuoShi
  tianBaoRenXinMing: '', //填报人姓名
});
//餐段
const chanDuan = [
  {
    text: '早餐',
    value: '早餐',
  },
  {
    text: '午餐',
    value: '午餐',
  },
  {
    text: '晚餐',
    value: '晚餐',
  },
  {
    text: '茶歇',
    value: '茶歇',
  },
  {
    text: '宵夜',
    value: '宵夜',
  },
];
// 纠正措施
const jiuZhenChuoShi = [
  {
    text: 'A. 无需纠正措施',
    value: 'A. 无需纠正措施',
  },
  {
    text: 'B. 再加热至74°C ，仅可再加热一次',
    value: 'B. 再加热至165° F (74° C) ，仅可再加热一次',
  },
  {
    text: 'C. 丢弃',
    value: 'C. 丢弃',
  },
];

// 开始时间显示
const datesPop = ref(false);
// 开始时间组件点击事件
const handleTimeSelected = (time: string) => {
  datesPop.value = false;
  formData.value.selectedTime = time;
};

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    chanDuan: '', // 餐段chanDuan
    foodName: '', // 食物名称foodName
    selectedTime: '', //开始时间selectedTime
    startTemperature: '', // 开始温度startTemperature
    afterOneHourTemperature: '', // 1小时后温度afterOneHourTemperature
    afterTwoHourTemperature: '', // 2小时后温度afterTwoHourTemperature
    towJiuZhenChuoShi: '', // 2小时纠正措施
    afterFourHourTemperature: '', // 4小时后温度afterFourHourTemperature
    afterSixHourTemperature: '', // 6小时后温度afterSixHourTemperature
    jiuZhenChuoShi: '', // 纠正措施jiuZhenChuoShi
    tianBaoRenXinMing: '', //填报人姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
